<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饼图数据展示</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>极坐标下柱状图-景区与星级</h1>
            <select name="area" id="">
                <option value="全部">全部</option>
                <option value="西藏" class="one">西藏</option>
                <option value="张家界" class="two">张家界</option>
                <option value="大理" class="three">大理</option>
                <option value="长沙" class="four">长沙</option>
            </select>
        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content" style="height: 100%">
        <!-- 内容展示 -->
        <div class="show-content" id="main" style="height: 93%; "></div>

    </div>

    <!-- 时间 -->
    <script src="../static/assets/js/index.js"></script>
    <!-- 极坐标堆积柱状图图 -->
     <script>
        // 默认展示，四个景区星级景点的堆叠图
        function first(){
            var chartDom = document.getElementById('main');

        chartDom.innerHTML = `
                {% for data in xizang %}
                    {% if data[2] != none %}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[2] }}</p>
                    {% endif %}
                {% endfor %}
                {% for data in zjj %}
                    {% if data[2] != none %}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[2] }}</p>
                    {% endif %}
                {% endfor %}
                {% for data in daLi %}
                    {% if data[2] != none %}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[2] }}</p>
                    {% endif %}
                {% endfor %}
                {% for data in cs %}
                    {% if data[2] != none %}
                        <p>{{ data[0] }}</p>
                        <p>{{ data[2] }}</p>
                    {% endif %}
                {% endfor %}
            `

        var oP = document.querySelectorAll("p");

        var arr = []
        for(var i = 0;i < oP.length; i++){
            arr.push(oP[i].innerText);
        }
        console.log(arr);

        // 西藏
        var arr1 = []   // 存放景点
        var arr2 = []   // 存放景点星级
        for(var i = 0; i< 38; i++) {
            if(i%2 == 0){
                arr1.push(oP[i].innerText);
            }
            else{
                arr2.push(parseInt(oP[i].innerText));
            }
        }
        // 张家界
        var arr3 = []   // 存放景点
        var arr4 = []   // 存放景点星级
        for(var i = 38; i < 66; i++) {
            if(i%2 == 0){
                arr3.push(oP[i].innerText);
            }
            else{
                arr4.push(parseInt(oP[i].innerText));
            }
        }
        // 大理
        var arr5 = []   // 存放景点
        var arr6 = []   // 存放景点星级
        for(var i = 66; i < 96; i++) {
            if(i%2 == 0){
                arr5.push(oP[i].innerText);
            }
            else{
                arr6.push(parseInt(oP[i].innerText));
            }
        }
        // 长沙
        var arr7 = []   // 存放景点
        var arr8 = []   // 存放景点星级
        for(var i = 96; i < 138; i++) {
            if(i%2 == 0){
                arr7.push(oP[i].innerText);
            }
            else{
                arr8.push(parseInt(oP[i].innerText));
            }
        }

        console.log(arr1)
        console.log(arr2)
        console.log(arr3)
        console.log(arr4)
        console.log(arr5)
        console.log(arr6)
        console.log(arr7)
        console.log(arr8)



        var myChart = echarts.init(chartDom);
        var option;

        option = {
            angleAxis: {
                type: 'category',
                data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>星级 : {c}"
              },
            radiusAxis: {},
            polar: {},
            series: [
                {
                    type: 'bar',
                    data: arr2,
                    coordinateSystem: 'polar',
                    name: '西藏',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    type: 'bar',
                    data: arr4,
                    coordinateSystem: 'polar',
                    name: '张家界',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    type: 'bar',
                    data: arr6,
                    coordinateSystem: 'polar',
                    name: '大理',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                },
                {
                    type: 'bar',
                    data: arr8,
                    coordinateSystem: 'polar',
                    name: '长沙',
                    stack: 'a',
                    emphasis: {
                        focus: 'series'
                    }
                }
            ],
            legend: {
                show: true,
                top: '5%',
                right: '8%',
                orient: 'vertical',
                data: ['西藏', '张家界', '大理','长沙']
            },
            title: {
              show: true,
                top: '2%',
              left: 'center',
              text:'四个景区所有星级景点 - 极坐标下的堆积柱状图'
            }
        };
        option && myChart.setOption(option);
        }
        // 西藏
        function xizang(){
            var chartDom = document.getElementById('main');

            chartDom.innerHTML = `
                    {% for data in xizang %}
                        {% if data[2] != none %}
                            <p>{{ data[0] }}</p>
                            <p>{{ data[2] }}</p>
                        {% endif %}
                    {% endfor %}
                `

            var oP = document.querySelectorAll("p");

            var arr = []
            for(var i = 0;i < oP.length; i++){
                arr.push(oP[i].innerText);
            }
            console.log(arr);

            // 西藏
            var arr1 = []   // 存放景点
            var arr2 = []   // 存放景点星级
            for(var i = 0; i< arr.length; i++) {
                if(i%2 == 0){
                    arr1.push(oP[i].innerText);
                }
                else{
                    arr2.push(parseInt(oP[i].innerText));
                }
            }
            console.log(arr1)
            console.log(arr2)

            var myChart = echarts.init(chartDom);
            var option;

            option = {
                angleAxis: {
                    type: 'category',
                    data: arr1
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}A景区"
                  },
                radiusAxis: {},
                polar: {},
                series: [
                    {
                        type: 'bar',
                        data: arr2,
                        coordinateSystem: 'polar',
                        name: '西藏',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                ],
                legend: {
                    show: true,
                    data: ['西藏']
                }
            };
            option && myChart.setOption(option);

            }
        // 张家界
        function zjj(){

            var chartDom = document.getElementById('main');

            chartDom.innerHTML = `
                    {% for data in zjj %}
                        {% if data[2] != none %}
                            <p>{{ data[0] }}</p>
                            <p>{{ data[2] }}</p>
                        {% endif %}
                    {% endfor %}
                `

            var oP = document.querySelectorAll("p");

            var arr = []
            for(var i = 0;i < oP.length; i++){
                arr.push(oP[i].innerText);
            }
            console.log(arr);

            // 西藏
            var arr1 = []   // 存放景点
            var arr2 = []   // 存放景点星级
            for(var i = 0; i< arr.length; i++) {
                if(i%2 == 0){
                    arr1.push(oP[i].innerText);
                }
                else{
                    arr2.push(parseInt(oP[i].innerText));
                }
            }
            console.log(arr1)
            console.log(arr2)

            var myChart = echarts.init(chartDom);
            var option;

            option = {
                angleAxis: {
                    type: 'category',
                    data: arr1
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}A景区"
                  },
                radiusAxis: {},
                polar: {},
                series: [
                    {
                        type: 'bar',
                        data: arr2,
                        coordinateSystem: 'polar',
                        name: '张家界',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                ],
                legend: {
                    show: true,
                    data: ['张家界']
                }
            };
            option && myChart.setOption(option);

            }
        // 大理
        function dali(){

            var chartDom = document.getElementById('main');

            chartDom.innerHTML = `
                    {% for data in daLi %}
                        {% if data[2] != none %}
                            <p>{{ data[0] }}</p>
                            <p>{{ data[2] }}</p>
                        {% endif %}
                    {% endfor %}
                `

            var oP = document.querySelectorAll("p");

            var arr = []
            for(var i = 0;i < oP.length; i++){
                arr.push(oP[i].innerText);
            }
            console.log(arr);

            // 西藏
            var arr1 = []   // 存放景点
            var arr2 = []   // 存放景点星级
            for(var i = 0; i< arr.length; i++) {
                if(i%2 == 0){
                    arr1.push(oP[i].innerText);
                }
                else{
                    arr2.push(parseInt(oP[i].innerText));
                }
            }
            console.log(arr1)
            console.log(arr2)

            var myChart = echarts.init(chartDom);
            var option;

            option = {
                angleAxis: {
                    type: 'category',
                    data: arr1
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}A景区"
                  },
                radiusAxis: {},
                polar: {},
                series: [
                    {
                        type: 'bar',
                        data: arr2,
                        coordinateSystem: 'polar',
                        name: '大理',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                ],
                legend: {
                    show: true,
                    data: ['大理']
                }
            };
            option && myChart.setOption(option);

            }
        // 长沙
        function cs(){

            var chartDom = document.getElementById('main');

            chartDom.innerHTML = `
                    {% for data in cs %}
                        {% if data[2] != none %}
                            <p>{{ data[0] }}</p>
                            <p>{{ data[2] }}</p>
                        {% endif %}
                    {% endfor %}
                `

            var oP = document.querySelectorAll("p");

            var arr = []
            for(var i = 0;i < oP.length; i++){
                arr.push(oP[i].innerText);
            }
            console.log(arr);

            // 西藏
            var arr1 = []   // 存放景点
            var arr2 = []   // 存放景点星级
            for(var i = 0; i< arr.length; i++) {
                if(i%2 == 0){
                    arr1.push(oP[i].innerText);
                }
                else{
                    arr2.push(parseInt(oP[i].innerText));
                }
            }
            console.log(arr1)
            console.log(arr2)

            var myChart = echarts.init(chartDom);
            var option;

            option = {
                angleAxis: {
                    type: 'category',
                    data: arr1
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}A景区"
                  },
                radiusAxis: {},
                polar: {},
                series: [
                    {
                        type: 'bar',
                        data: arr2,
                        coordinateSystem: 'polar',
                        name: '长沙',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                ],
                legend: {
                    show: true,
                    data: ['长沙']
                }
            };
            option && myChart.setOption(option);
            }

        //调用默认展示
        first()

        var select = document.querySelector('select');
        select.addEventListener('change', function (evt){
            var e = evt || window.event;
            // 移除之前创建的实例并且重新创建一个Echarts实例
            document.getElementById("main").removeAttribute('_echarts_instance_');
            var index = select.selectedIndex;
            if(index == 1){
                xizang();
            }else if(index == 2){
                zjj();
            }else if(index == 3){
                dali();
            }else if(index == 4){
                cs();
            }else{
                first();
            }
        })
    </script>


</body>
</html>